<template>
  <div class="p17">
    <video
      controls="controls"
      autoplay="autoplay"
      loop="loop"
      :muted="six1Muted"
      ref="video1"
      width="1267px"
      height="500px"
      @mousemove="six1Muted?$refs.video1.currentTime=0:'';six1Muted=false"
      @mouseleave="six1Muted=true"
      class="video"
    >
      <source :src="videoUrl+'/6/2.mp4'" type="video/mp4" />
    </video>
    <!-- <div class="p17-center-right" @click="isIframe">

        </div>
        <div
            v-if="showIframe"
            class="iframe"
            draggable="true"
            @dragend="changePosition"
            v-clickoutside="closeIframe"
            :style="{'top':iframePosition.top+'px','left':iframePosition.left+'px'}"
            >
            <div class="iframe-title">
                <span>数据应用门户</span>
                <span @click="isIframe">
                <Icon type="close"></Icon>
                </span>
            </div>
            <div style="display:flex;justify-content: center;align-items: center;">
                <iframe width="1650px" height="800px" src="http://10.208.122.27:18090/cimdist/index.html#/index"></iframe>
            </div>
    </div>-->
  </div>
</template>
<script>
import clickoutside from "../../assets/directives/clickoutside.js";
import { mapState } from "vuex";
import WOW from "wow.js";
export default {
  name: "P17",
  created() {
    new WOW().init();
  },
  computed: {
    ...mapState(["videoUrl"])
  },
  mounted() {
    document.addEventListener("keyup", this.changePage);
  },
  data() {
    return {
      six1Muted: true,
      showIframe: false,
      iframePosition: {
        top: 100,
        left: 1200
      }
    };
  },
  methods: {
    changePage(e) {
      //右键
      if (e.keyCode == 40||e.keyCode==34) {
        this.$router.replace(`/ppt/p18`);
      }
      //左键
      if (e.keyCode == 38||e.keyCode==33) {
        this.$router.replace(`/ppt/p16`);
      }
    },
    isIframe(e) {
      this.showIframe = !this.showIframe;
      e.stopPropagation();
    },
    closeIframe(e) {
      this.showIframe = false;
      e.stopPropagation();
    },
    //改变位置
    changePosition(e) {
      this.iframePosition = {
        top: e.y,
        left: e.x
      };
    }
  },
  directives: { clickoutside },
  beforeDestroy() {
    document.removeEventListener("keyup", this.changePage);
  },
  watch: {
    $route: {
      handler(n, v) {
        document.addEventListener("keyup", this.changePage);
      },
      deep: true
    }
  }
};
</script>
<style lang="scss" scoped>
.p17 {
  background-image: url("../../assets/images/pptScreen/pFirst/17.png");
  position: relative;
}
.video {
  position: absolute;
  top: 398px;
  left: 1325px;
  height: 480px;
  width: 1297px;
}
.p17-center-right {
  position: absolute;
  width: 558px;
  height: 283px;
  top: 627px;
  left: 1892px;
}
.iframe {
  width: 1400px;
  position: absolute;
  background-color: #fff;
  z-index: 999;
  &-title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    font-weight: bold;
  }
}
</style>